<style type="text/css">
#untangle{
    float: left;
}
#result{
    display: inline;
    float: left;
    margin-left: 10px;
    margin-top: 0;
    padding-top: 10px;
}
#result_icon{
    float: left;
    margin: 0px 5px; 
}
#result_text{
   display: inline;    
}
#preview{
    margin-top : 5px;
	border : 1px solid #C6C8C6;
    padding : 5px;
}
</style>

<div class="view-form">
<?php //echo $this->form->render($this) ?>

<!-- <div id="image"></div>-->
<form id="<?php echo $this->form->getAttrib('id');?>" name="<?php echo $this->form->getAttrib('name');?>" enctype="multipart/form-data" action="<?php echo $this->escape($this->form->getAction()) ?>" method="<?php echo $this->escape($this->form->getMethod()) ?>" class="global_form">
    <div>
        <div>
            <h3>
                <?php echo $this->translate($this->form->getTitle()) ?>
            </h3>
            <p class="form-description"><?php //echo $this->translate($this->form->getDescription()) ?></p>
            <div class="form-elements">
                <?php echo $this->form->getDecorator('FormErrors')->setElement($this->form)->render("");?>
                <?php if($this->form->getDecorator('FormMessages')->getMessages()) echo $this->form->getDecorator('FormMessages')->setElement($this->form)->render('');?> 
                
                <div class="form-wrapper" id="talktangle-wrapper">
					<div class="form-element" id="talktangle-element">
                        <div id="preview"><?php echo $this->preview?></div>
					</div>
				</div>  
                              
                <?php echo $this->form->content; ?>
                <?php echo $this->form->untangle; ?>
                <?php echo $this->form->title; ?>
                <?php echo $this->form->buttons; ?>
            </div>
         </div>
    </div>
</form> 
</div>

<script type="text/javascript">
    function unTangle(){
        var correct = $('title').get('value');
        var answer = $('content').get('value');
        if(!$('result')){
            var hint = new Element('div', {
                    'id' : 'result',
                    }).inject($('untangle'),'after');               
        }
               
        if(correct == answer){
            $('result').set('html', '<img id="result_icon" src="'+ en4.core.baseUrl + 'application/modules/Core/externals/images/markread.png' +'">Congratulation, your answer is correct');           
        }
        else{
            $('result').set('html', '<img id="result_icon" src="'+ en4.core.baseUrl + 'application/modules/Core/externals/images/admin/referrers_clear.png' +'">Sorry, your answer is not correct');
        }
    }
</script>